<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Color My Own Beauty.</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body class="theory">
        <header class="header" id="header">
            <nav class="nav">
                <a href="#" class="nav__logo">
                    <div>
                        <!-- <img src="img/ts_logo_2x-v2.png" alt="Logo" /> -->
                        Color My Own Beauty.
                    </div>
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list" data-lang="en" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">Theory</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">Test</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">Contact</a></li>
                    </ul>
                    <ul class="nav__list" data-lang="zh" data-display="flex">
                        <li class="nav__item"><a href="index.html" class="nav__link">首页</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="theory.html" class="nav__link">四季理论</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="test.html" class="nav__link">测试</a></li>
                        <li class="font-thin">/</li>
                        <li class="nav__item"><a href="contact.html" class="nav__link">联系我们</a></li>
                    </ul>

                    <div class="switch">
                        <label class="switch-labels left">EN</label>
                        <input type="checkbox" id="langToggle" onchange="toggleLang()" />
                        <span class="slider round"></span>
                        <label class="switch-labels right">CN</label>
                    </div>
                </div>
            </nav>
        </header>

        <div class="banner"></div>

        <main data-lang="en" data-display="block">
            <h1>Four seasons color theory development</h1>
            <div class="timeline">
                <div class="container left">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Johann Wolfgang von Goethe" />
                        <h2>Johann Wolfgang von Goethe</h2>
                        <p>
                            The seed of color analysis was planted when German philosopher Johann Wolfgang von Goethe
                            realized the connections between different colors and created “color psychology”.
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1749-1832</div>
                </div>
                <div class="container right">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Johannes Itten" />
                        <h2>Johannes Itten</h2>
                        <p>
                            Between 1919 and 1933, Johannes Itten created four different color palettes corresponding to
                            the four seasons, each of which included four different complexions. These made it much
                            easier for students to paint more attractive portraits.
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1919-1933</div>
                </div>
                <div class="container left">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Suzanne Caygill" />
                        <h2>Suzanne Caygill</h2>
                        <p>
                            California-based color theorist Suzanne Caygill combined Itten’s “season theory” with
                            Goethe’s “color psychology”. Her theory asserted that humans carry information about their
                            personality and style in their natural coloration.
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1911-1994</div>
                </div>
                <div class="container right">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Carole Jackson" />
                        <h2>Carole Jackson</h2>
                        <p>
                            Psychologist Carole Jackson wrote the book “Color Me Beautiful”, which became wildly popular
                            in the 1980’s. She simplified Caygill’s seasonal system into a single personality per color
                            season, making it more straightforward for everyday women to shop for appropriate clothes,
                            accessories, and makeup.
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1980-present</div>
                </div>
            </div>
        </main>
        <main data-lang="zh" data-display="block">
            <h1>四季色彩理论发展</h1>
            <div class="timeline">
                <div class="container left">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Johann Wolfgang von Goethe" />
                        <h2>约翰·沃尔夫冈·冯·歌德</h2>
                        <p>
                            德国哲学家约翰·沃尔夫冈·冯·歌德在意识到不同颜色之间的联系后，种下了色彩分析的种子，并创建了“色彩心理学”。
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1749-1832</div>
                </div>
                <div class="container right">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Johannes Itten" />
                        <h2>约翰内斯·伊顿</h2>
                        <p>
                            在1919年至1933年间，瑞士画家和德国包豪斯大学教授约翰内斯·伊顿（Johannes
                            Itten）创造了四种不同的色盘，分别对应四个季节，每个色盘包含了四种不同的肤色。这使得学生们能够更容易地绘制出更具吸引力的肖像画。
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1919-1933</div>
                </div>
                <div class="container left">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Suzanne Caygill" />
                        <h2>苏珊·凯吉尔</h2>
                        <p>
                            加州的色彩理论家苏珊·凯吉尔（Suzanne
                            Caygill，1911-1994）通过结合伊顿的“季节理论”与歌德的“色彩心理学”，迈出了下一步。她自己的理论认为，人类在其自然色彩中携带有关个性和风格的信息，并且我们可以通过个人特征如皮肤、头发和眼睛将个人色彩与自然界中的色彩联系起来。
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1911-1994</div>
                </div>
                <div class="container right">
                    <div class="content">
                        <img
                            src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg"
                            alt="Carole Jackson" />
                        <h2>卡罗尔·杰克逊</h2>
                        <p>
                            心理学家卡罗尔·杰克逊（Carole Jackson）撰写了《色彩我美丽》（Color Me
                            Beautiful）一书，在20世纪80年代广受欢迎。她在书中简化了凯吉尔的季节系统（该系统每个季节使用了十六种不同的人格类型），并将其减少到每个色彩季节只有一种人格类型。这让日常女性在选购合适的服装、配饰和化妆品时变得更加简单明了。
                        </p>
                    </div>
                    <div class="dot"></div>
                    <div class="time">1980-present</div>
                </div>
            </div>
        </main>
        <footer>
            <p>© 2024 Color My Own Beauty. All rights reserved.</p>
        </footer>
        <script>
            const zhDiv = document.querySelectorAll('[data-lang="zh"]');
            const enDiv = document.querySelectorAll('[data-lang="en"]');

            zhDiv.forEach(function (el) {
                el.style.display = 'none';
            });

            function toggleLang() {
                var checkbox = document.getElementById('langToggle');
                if (checkbox.checked) {
                    // Change to Chinese
                    document.documentElement.lang = 'zh';
                    console.log('Switched to Chinese');
                    zhDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    enDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                } else {
                    // Change to English
                    document.documentElement.lang = 'en';
                    console.log('Switched to English');
                    enDiv.forEach(function (el) {
                        const display = el.getAttribute('data-display');
                        el.style.display = display;
                    });
                    zhDiv.forEach(function (el) {
                        el.style.display = 'none';
                    });
                }

                // Here you would add code to actually change the text on the page.
                // For example, you could use a dictionary object or fetch new content from the server.
            }
        </script>
    </body>
</html>
